{extend name="layout/base" /}

{block name="css"}
<style>
.demo-section {
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.demo-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(74, 144, 226, 0.2);
}

.demo-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
</style>
{/block}

{block name="content"}
<div class="container">
    <h1>🎨 UI组件演示页面</h1>
    <p style="color: #666; margin-bottom: 30px;">测试所有现代化UI组件的功能和样式</p>

    <!-- 统计卡片演示 -->
    <div class="demo-section">
        <h2 class="demo-title">📊 统计卡片</h2>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">156</div>
                <div class="stat-label">总名片数量</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">23</div>
                <div class="stat-label">今日生成</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">8</div>
                <div class="stat-label">部门数量</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">45</div>
                <div class="stat-label">岗位数量</div>
            </div>
        </div>
    </div>

    <!-- 按钮演示 -->
    <div class="demo-section">
        <h2 class="demo-title">🔘 按钮组件</h2>
        <div class="demo-buttons">
            <button class="btn btn-primary">主要按钮</button>
            <button class="btn btn-secondary">次要按钮</button>
            <button class="btn btn-success">成功按钮</button>
            <button class="btn btn-warning">警告按钮</button>
            <button class="btn btn-danger">危险按钮</button>
            <button class="btn btn-outline">轮廓按钮</button>
        </div>
        <div class="demo-buttons">
            <button class="btn btn-primary btn-sm">小按钮</button>
            <button class="btn btn-primary">默认按钮</button>
            <button class="btn btn-primary btn-lg">大按钮</button>
        </div>
    </div>

    <!-- 通知系统演示 -->
    <div class="demo-section">
        <h2 class="demo-title">🔔 通知系统</h2>
        <div class="demo-buttons">
            <button class="btn btn-success" onclick="showSuccess('操作成功完成！', '成功')">成功通知</button>
            <button class="btn btn-danger" onclick="showError('操作失败，请重试', '错误')">错误通知</button>
            <button class="btn btn-warning" onclick="showWarning('请注意相关事项', '警告')">警告通知</button>
            <button class="btn btn-primary" onclick="showInfo('这是一条提示信息', '提示')">信息通知</button>
        </div>
    </div>

    <!-- 加载状态演示 -->
    <div class="demo-section">
        <h2 class="demo-title">⏳ 加载状态</h2>
        <div class="demo-buttons">
            <button class="btn btn-primary" onclick="demoGlobalLoading()">全局加载</button>
            <button class="btn btn-secondary" onclick="demoButtonLoading(this)">按钮加载</button>
            <button class="btn btn-info" onclick="demoTableLoading()">表格加载</button>
        </div>
    </div>

    <!-- 表单演示 -->
    <div class="demo-section">
        <h2 class="demo-title">📝 表单组件</h2>
        <div class="demo-grid">
            <div>
                <form id="demoForm">
                    <div class="form-group">
                        <label for="name">姓名 <span class="required">*</span></label>
                        <input type="text" id="name" name="name" required>
                        <div class="form-help">请输入您的真实姓名</div>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email">
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">手机号</label>
                        <input type="tel" id="phone" name="phone">
                    </div>
                    
                    <div class="form-group">
                        <label for="department">部门</label>
                        <select id="department" name="department">
                            <option value="">请选择部门</option>
                            <option value="tech">技术部</option>
                            <option value="sales">销售部</option>
                            <option value="hr">人事部</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="description">描述</label>
                        <textarea id="description" name="description" placeholder="请输入描述信息..."></textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">提交表单</button>
                        <button type="reset" class="btn btn-secondary">重置</button>
                    </div>
                </form>
            </div>
            
            <div>
                <h3>表单网格布局</h3>
                <div class="form-grid-2">
                    <div class="form-group">
                        <label>姓</label>
                        <input type="text" placeholder="姓">
                    </div>
                    <div class="form-group">
                        <label>名</label>
                        <input type="text" placeholder="名">
                    </div>
                </div>
                
                <div class="form-grid-3">
                    <div class="form-group">
                        <label>年</label>
                        <select><option>2025</option></select>
                    </div>
                    <div class="form-group">
                        <label>月</label>
                        <select><option>1月</option></select>
                    </div>
                    <div class="form-group">
                        <label>日</label>
                        <select><option>1日</option></select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 表格演示 -->
    <div class="demo-section">
        <h2 class="demo-title">📋 表格组件</h2>
        <div class="table-container">
            <table class="data-table" id="demoTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>001</td>
                        <td>张三</td>
                        <td>技术部</td>
                        <td><span class="table-status status-active">激活</span></td>
                        <td>
                            <div class="table-actions">
                                <button class="btn btn-warning btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>002</td>
                        <td>李四</td>
                        <td>销售部</td>
                        <td><span class="table-status status-pending">待审核</span></td>
                        <td>
                            <div class="table-actions">
                                <button class="btn btn-warning btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>003</td>
                        <td>王五</td>
                        <td>人事部</td>
                        <td><span class="table-status status-inactive">禁用</span></td>
                        <td>
                            <div class="table-actions">
                                <button class="btn btn-warning btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">删除</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 卡片演示 -->
    <div class="demo-section">
        <h2 class="demo-title">🃏 卡片组件</h2>
        <div class="demo-grid">
            <div class="card">
                <div class="card-header">
                    <h3>卡片标题</h3>
                </div>
                <div class="card-body">
                    <p>这是卡片的内容区域，可以放置任何内容。</p>
                    <p>支持现代化的毛玻璃效果和渐变背景。</p>
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary btn-sm">操作按钮</button>
                </div>
            </div>
            
            <div class="card">
                <div class="card-body">
                    <h4>简单卡片</h4>
                    <p>没有头部和底部的简单卡片样式。</p>
                    <button class="btn btn-outline btn-sm">了解更多</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 空状态演示 -->
    <div class="demo-section">
        <h2 class="demo-title">🗂️ 空状态</h2>
        <div class="empty-state">
            <div class="empty-state-icon">📭</div>
            <div class="empty-state-title">暂无数据</div>
            <div class="empty-state-description">当前没有任何数据，请先添加一些内容。</div>
            <button class="btn btn-primary">添加数据</button>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
// 演示函数
function demoGlobalLoading() {
    showLoading('正在处理请求...');
    setTimeout(() => {
        hideLoading();
        showSuccess('处理完成！');
    }, 2000);
}

function demoButtonLoading(button) {
    setButtonLoading(button, true, '处理中...');
    setTimeout(() => {
        setButtonLoading(button, false);
        showSuccess('按钮操作完成！');
    }, 2000);
}

function demoTableLoading() {
    const table = document.getElementById('demoTable');
    setTableLoading(table, true);
    setTimeout(() => {
        setTableLoading(table, false);
        showSuccess('表格数据加载完成！');
    }, 2000);
}

// 表单提交演示
document.getElementById('demoForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const validation = Utils.validateForm(this);
    if (!validation.isValid) {
        validation.errors.forEach(error => {
            showError(error);
        });
        return;
    }
    
    showSuccess('表单验证通过！', '成功');
});

// 页面加载完成提示
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
        showInfo('UI组件演示页面加载完成！欢迎测试各种功能。', '欢迎', 4000);
    }, 500);
});
</script>
{/block}